<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="idy" uri="http://www.ideyatech.com/tides"%>

<td colspan="7">
	<div class="new-form-content">	
		<form:form id="staff-form-${staff.id}" commandName="staff" cssClass="form-horizontal">
			<div class="form-box-title"><h4><idy:form_title isNew="${staff.isNew}" formName="staff"/></h4></div>
			<spring:bind path="staff.*">
			<c:if test="${status.error}">
				<!-- this is a hack to crud.js to handle validation messages. -->
				<c:if test="${staff.isNew}">
				<!-- <tr id="staff-row-new"> -->
				</c:if>		
				<div class='alert alert-error admin-error'>
					<button type="button" class="close" data-dismiss="alert">&times;</button>
					<strong>Oh snap!</strong><br />
					<form:errors path="*" />
				</div>
			</c:if>
			</spring:bind>
			
			<div class="control-group">
				<form:label path="firstName" cssClass="control-label"><spring:message code="label.admin.staff.firstName" /> :</form:label>
				<div class="controls">
					<form:input path="firstName" autocomplete="off"/><span class="required-field" >*</span>
				</div>
			</div>
			
			<div class="control-group">
				<form:label path="middleName" cssClass="control-label"><spring:message code="label.admin.staff.middleName" /> :</form:label>
				<div class="controls">
					<form:input path="middleName" autocomplete="off"/><span class="required-field">*</span>
				</div>
			</div>
			
			<div class="control-group">
				<form:label path="lastName" cssClass="control-label"><spring:message code="label.admin.staff.lastName" /> :</form:label>
				<div class="controls">
					<form:input path="lastName" autocomplete="off"/><span class="required-field">*</span>
				</div>
			</div>
			
			<div class="control-group">
				<label class="control-label"><spring:message code="label.staff.gender"/></label>
				<div class="controls">
					<c:forEach items="${genders}" var="gender">
						<label class="radio inline">
							<input type="radio" class="optionsRadios" name="gender" value="${gender.id}" <c:if test='${staff.gender.id eq gender.id}'>checked="checked"</c:if>/>
							${gender.value}
						</label>
					</c:forEach>
				</div>
			</div>
	    	
	    	<div class="control-group">
				<label class="control-label"><spring:message code="label.staff.postion"/> :</label>
				<div class="controls">
					<form:select path="position">
						<form:options items="${staffs}" itemLabel="value" itemValue="id"/>
					</form:select>
				</div>
			</div>
			
			<div class="control-group">
				<label class="control-label"><spring:message code="label.staff.birthdate"/> :</label>
				<div class="controls">
					<fmt:formatDate value='${staff.birthdate}' pattern="MM/dd/yyyy" var="birthdate"/>
					<input type="text" id="birthdate" name="birthdate" value="${birthdate}" autocomplete="off"/> <i class="icon-calendar"></i>
				</div>
			</div>
			
			<div class="control-group">
				<div class="controls">
					<idy:submit_button id="${staff.id}" page="staffs.jspx" formName="staff-form-${staff.id}" prefix="staff"/>
  					<idy:cancel_button id="${staff.id}" page="staffs.jspx" prefix="staff"/>
				</div>
			</div>
			
		</form:form>
	</div>
</td>

<script type="text/javascript">
	$(document).ready(function(){
		$('#birthdate').datepicker({
			yearRange: "-80:+0",
			changeMonth: true,
		    changeYear: true
		});
	});
</script>